<template>
    <div>
        <a href='/'>返回首页</a>
        <h1>房价列表显示</h1>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>房型</th>
                    <th>产品名称</th>
                    <th>价格</th>
                    <th>收款方式</th>
                    <th>房间数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in data.list">
                    <td>{{ item.FXName }}</td>
                    <td>{{ item.Name }}</td>
                    <td>{{ item.Money }}</td>
                    <td>{{ item.SKFS == true ? "预定付费" : "到店付费" }}</td>
                    <td>{{ item.Number }}</td>
                    <td><input type="button" value="修改" @click="xg(item.Id)"></td>
                </tr>
            </tbody>
        </table>
        <span>共{{ data.totalcount }}条</span>
        <span>每页{{ data.totalcount }}条</span>
        <span>共 {{ info.pageindex }} / {{ data.totalpage }}页</span>
        <input type="button" value="首页" @click="gopage(1)">
        <input type="button" value="上一页" @click="gopage(info.pageindex - 1)">
        <span v-for="a in data.totalpage" @click="gopage(a)">{{ a }}</span>
        <input type="button" value="下一页" @click="gopage(info.pageindex + 1)">
        <input type="button" value="尾页" @click="gopage(data.totalpage)">
        <input type="number" v-model="info.pageindex">
        <input type="button" value="跳转" @click="gopage(info.pageindex)">
        <select v-model="info.pagesize" @change="show">
            <option v-for="a in arr" :value="a">每页{{ a }}条</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
let info: any = reactive({
    pageindex: 1,
    pagesize: 2,

})
let data: any = reactive({
    totalcount: 0,
    totalpage: 0,
    list: [],
})
let arr: any = ref([2, 4, 6, 8, 10]);
onMounted(() => {
    getlist();
})
const getlist = () => {
    axios({
        url: '/api/Type/TypeShow',
        method: 'get',
        params: info
    })
        .then(res => {
            console.log(res);
            Object.assign(data, res.data)
        })
        .catch(err => {
            console.log(err);

        })
}
const show = () => {
    info.pageindex = 1;
    getlist();
}
const gopage = (num: any) => {
    if (num < 1) {
        info.pageindex = 1;
        return;
    }
    if (num > data.totalpage) {
        info.pageindex = data.totalpage
        return;
    }
    info.pageindex = num;
    getlist();
}


const xg = (id: any) => {
    router.push({
        path: '/typeupdate',
        query: {
            id: id
        }
    })
}
</script>

<style scoped>
span {
    margin: 0 5px;
}
</style>